<template>
  <div class="categorylist">
    <!-- 顶部 -->
    <van-sticky>
      <van-nav-bar>
        <van-icon name="arrow-left" slot="left" size="20" class="icon-tl" @click="goBack" />
        <van-icon name="cart-o" slot="right" size="20" class="icon-tr" @click="goShopCart" />
      </van-nav-bar>
    </van-sticky>
    <!-- tab标签页 -->
    <van-tabs animated v-model="active" swipeable>
      <van-tab v-for="item in brotherData" :key="item.id" :title="item.name" class="tab_body">
        <p>{{item.front_name}}</p>
        <div class="sorry" v-if="goodList.length==0">抱歉，暂无此类商品</div>
        <van-grid :column-num="2">
          <van-grid-item
            v-for="item in goodList"
            :key="item.id"
            class="grid_items1"
            :to="'/product/'+item.id"
          >
            <van-image lazy-load :src="item.list_pic_url" />
            <h6>{{item.name}}</h6>
            <h5>{{'￥'+item.retail_price}}</h5>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// 导入网络封装模块
import { request } from "@/axios/request";
export default {
  name: "Categorylist",
  data() {
    return {
      brotherData: [],
      // this.$store.state.tabsIndex接收到上一页的共享index
      active: this.$store.state.tabsIndex,
      defCategoryId: this.$route.params.id,
      goodList: []
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
      // console.log()
    },
    goShopCart() {
      this.$router.replace("/shopcart");
    }
  },
  created() {
    request({
      url: "goods/category",
      params: { id: this.$route.params.id }
    })
      .then(res => {
        this.brotherData = res.data.brotherCategory;
        return request({
          url: "goods/list",
          params: { categoryId: this.defCategoryId, page: 1, size: 10 }
        });
      })
      .then(res => {
        this.goodList = res.data.goodsList;
        // console.log(this.goodList);
      });
  },
  watch: {
    active(index) {
      let categoryId = this.brotherData[index].id;
      let page = 1;
      let size = 10;
      request({
        url: "goods/list",
        params: { categoryId, page, size }
      }).then(res => {
        this.goodList = res.data.goodsList;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.van-nav-bar,
.van-nav-bar__title {
  height: 40px;
}
.icon-tl,
.icon-tr {
  margin-top: 4px;
}
.tab_body {
  > h5,
  p {
    margin: 0px;
    text-align: center;
  }
  p {
    font-size: 12px;
    color: #999;
    background-color: antiquewhite;
  }
  .sorry {
    margin: 20px 0;
    text-align: center;
  }
}

.grid_items1 {
  h6 {
    text-align: center;
    margin: 0;
  }
  h5 {
    margin: 0;
    color: red;
  }
}
</style>